/*
 * @Author: qinuoyun
 * @Date:   2019-11-01 10:47:39
 * @Last Modified by:   qinuoyun
 * @Last Modified time: 2019-11-25 14:37:37
 */
import Vue from 'vue';

import md5 from 'js-md5';

import drag from './drag';

import { deepCopy } from '../../utils';

const drive = {
  "drag": Vue.extend(drag)
}

/**
 * 事件绑定
 * @param {any} element  绑定dom
 * @param {any} event    事件类型
 * @param {any} listener 方法
 */
function addEvent(element, event, listener) {
  if (element.addEventListener) {
    element.addEventListener(event, listener, true);
  } else if (element.attachEvent) {
    element.attachEvent('on' + event, listener);
  } else {
    element['on' + event] = listener;
  }
}


let getAnInstance = (data, index, node, type) => {
  //用于处理VUECX
  let $parent = node.$parent;
  let $store = node.$store;
  let component = new drive[type]({
    propsData: {
      value: data,
      index: index
    },
    el: document.createElement('div')
  })
  component.$parent = $parent;
  component.$store = $store;
  return component;
}

let pool = {};

let body = {};

let directives = {
  /**
   * 拖拽开始
   * @type {Object}
   */
  ctdrag: {
    inserted: function(el, binding, vnode) {
      //添加拖拽属性
      el.setAttribute("draggable", true);
      //拖动开始
      addEvent(el, 'dragstart', function(el) {
        let data = binding.value;
        let name = md5(JSON.stringify(binding.value));
        el.dataTransfer.setData('widgets', name);
        pool[name] = data;
      });
      //拖动结束
      addEvent(el, 'dragend', function(el) {
        console.log("拖动结束");
        el.dataTransfer.clearData()
      });
    },
    update: function(el, binding, vnode) { //组件更新

    }
  },
  /**
   * 拖拽放置
   * @type {Object}
   */
  ctplace: {
    bind: function(el, binding) { //被绑定
      //用于阻止默认事件
      addEvent(el, 'dragover', function(el) {
        el.preventDefault();
      })
    },
    //组件更新
    update: function(el, binding, vnode) {
      //console.log("binding.value;", binding.value);
    },
    // 指令的定义
    inserted: function(el, binding, vnode) {
      console.log("vnode",vnode);
      let node = vnode.context;
      let index = el.dataset.index;
      let data = binding.value;
      let instance = getAnInstance(data, index, node, 'drag')
      let model = el.appendChild(instance.$el);
      // 执行方法
      addEvent(el, 'drop', function(el) {
        let name = el.dataTransfer.getData('widgets');
        let widgets = pool[name];
        let _data = data[index];
        //两次数据分割 一次数据分割不行的 测试过
        _data.components = deepCopy(widgets.default);
        //Object.assign({}, widgets.default);
        //拷贝数据
        for (var i in _data.components.attribute) {
          //判断是否有多层
          if (typeof _data.components.attribute[i] == "object") {
            _data.components.attribute[i] = JSON.parse(JSON.stringify(_data.components.attribute[i]));
          }
        }
        //配置属性设置
        let _attribute = _data.components.components;

        //循环设置公共属性值
        for (let i in _attribute) {
          _attribute[i].attribute = _data.components.attribute;
        }
        //设置属性
        node.$store.state.main.attributes = _attribute
      });

    }
  }
}

export default directives;
